<template>
    <div>
      <el-button type="text" @click="dialogVisible = true">新增</el-button>
      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          prop="id"
          label="商品Id"
          width="180">
        </el-table-column>
        <el-table-column
          prop="productName"
          label="商品名称"
          width="180">
        </el-table-column>
        <el-table-column
          prop="imgUrl"
          label="商品图片"
          width="180">
          <!-- 商品图片展示-->
          <template slot-scope="scope">
          <el-image
            style="width: 100px; height: 100px"
            :src="scope.row.imgUrl"
            fit="contain"></el-image>
          </template>
        </el-table-column>
        <el-table-column
          prop="price"
          label="价格">
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间">
        </el-table-column>


        <el-table-column
          fixed="right"
          label="操作"
          width="100">

          <!--
           点击操作时，我们需要获取到操作的该条数据本身
           -->
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">删除</el-button>
            <el-button type="text" @click="upd(scope.row)" size="small">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页插件
      handleSizeChange: 每页条数更改时执行得方法
      current-change: 页码改变时执行的方法
      current-page： 当前页
      page-size: 每页条数
      total: 总条数
      -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page=params.page
        :page-sizes="[2, 4, 6, 8]"
        :page-size=params.size
        layout="total, sizes, prev, pager, next, jumper"
        :total=total>
      </el-pagination>

      <el-dialog
            title="新增/修改"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose">
            <!-- 编写form表单-->
        <el-form ref="form" :model="product" :rules="rules" label-width="80px">

          <el-form-item label="商品名称" prop="productName">
            <el-input v-model="product.productName"></el-input>
          </el-form-item>
          <el-form-item label="商品图片" prop="imgUrl">
            <!-- action 属性是图片上传得接口-->
            <el-upload
              class="avatar-uploader"
              action="http://localhost:8080/upload"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">
              <img v-if="product.imgUrl" :src="product.imgUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>

          </el-form-item>


          <el-form-item label="商品价格" prop="price">
            <el-input v-model="product.price"></el-input>
          </el-form-item>


          <el-form-item label="选择创建日期" prop="createTime">
            <el-date-picker
              v-model="product.createTime"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
        </el-form>

            <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit('form')">确 定</el-button>
      </span>
      </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "",
      data(){
          return{
            tableData:[],
            dialogVisible: false,
            product:{},
            params:{
              page:1,
              size:2
            },
            total:10,
            //定义表单验证规则
            rules:{
                productName:[
                  //required: true 代表不能为空
                  //message 给用户得提示信息
                  //trigger 什么时候触发
                    {required: true,message:"商品名称不能为空",trigger: 'blur'},
                  { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                  ],
              imgUrl:[
                {required:true,message:"图片必须上传!"}
              ],
              price:[
                {required:true,message:'价格必须填写',trigger:'blur'}
              ]
            }
          }

      },
      methods:{
          findAll:function () {
            this.$axios.get("/product/findAll?page="+this.params.page+"&size="+this.params.size).then(res=>{
              this.tableData=res.data.data;
                this.total=res.data.total
            })
          },
        handleClick:function (row) {
         this.$axios.get("/product/deleteById?id="+row.id).then(res=>{
            this.findAll();
         })
        },
        handleClose(done) {
          this.$confirm('确认关闭？')
            .then(_ => {
              done();
            })
            .catch(_ => {});
        },
        onSubmit:function (formName) {
         //在提交时，进行表单验证，如果通过则提交，如果不满足条件，则不允许提交
          this.$refs[formName].validate((valid) => {

            if (valid) {
                this.$axios.post("/product/updateOrSave", this.product).then(res => {
                  //新增或者修改完成后，关闭掉dialog
                  this.dialogVisible = false;
                  this.findAll();

                })
              }else {
                console.log('error submit!!');
                return false;
              }
          });
        },
        upd:function (row) {
          this.product=row;
          this.dialogVisible=true;
        },
        //上传图片成功后得回调方法
        //上传成功后得返回的图片得路径
        handleAvatarSuccess(res, file) {
          this.product.imgUrl=res;
          this.product.imgUrl = URL.createObjectURL(file.raw);
        },
        //上传图片之前执行得方法
        beforeAvatarUpload(file) {
          const isJPG = file.type === 'image/jpeg';
          const isLt2M = file.size / 1024 / 1024 < 2;

          if (!isJPG) {
            this.$message.error('上传头像图片只能是 JPG 格式!');
          }
          if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 2MB!');
          }
          return isJPG && isLt2M;
        },
        //分页得方法
        handleSizeChange(val) {
         this.params.size=val;
         this.findAll();
        },
        handleCurrentChange(val) {
          this.params.page=val;
          this.findAll();
        }
      },
      mounted(){
          this.findAll();
      }
    }
</script>

<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
